<%--
  Created by IntelliJ IDEA.
  User: 沐硕
  Date: 2024/6/21
  Time: 21:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<section id="company-services" class="padding-large">
    <!-- 公司服务区域开始，具有类名padding-large -->

    <!-- 容器 -->
    <div class="container">
        <!-- 行 -->
        <div class="row">

            <!-- 第一个服务项目，占据3列（Large屏幕）或6列（Medium屏幕） -->
            <div class="col-lg-3 col-md-6 pb-3">
                <!-- 图标盒子，使用Flex布局 -->
                <div class="icon-box d-flex">
                    <!-- 图标部分 -->
                    <div class="icon-box-icon pe-3 pb-3">
                        <!-- 购物车轮廓图标 -->
                        <svg class="cart-outline">
                            <use xlink:href="#cart-outline" />
                        </svg>
                    </div>
                    <!-- 内容部分 -->
                    <div class="icon-box-content">
                        <!-- 标题，大写黑色 -->
                        <h3 class="card-title text-uppercase text-dark">包邮</h3>
                        <!-- 描述文本 -->
                        <p>无论你在中国哪里，只要你想，我都来找你！</p>
                    </div>
                </div>
            </div>

            <!-- 第二个服务项目，占据3列（Large屏幕）或6列（Medium屏幕） -->
            <div class="col-lg-3 col-md-6 pb-3">
                <div class="icon-box d-flex">
                    <div class="icon-box-icon pe-3 pb-3">
                        <!-- 质保图标 -->
                        <svg class="quality">
                            <use xlink:href="#quality" />
                        </svg>
                    </div>
                    <div class="icon-box-content">
                        <h3 class="card-title text-uppercase text-dark">质保</h3>
                        <p>中国质保，部分商品7天无条件退货！！</p>
                    </div>
                </div>
            </div>

            <!-- 第三个服务项目，占据3列（Large屏幕）或6列（Medium屏幕） -->
            <div class="col-lg-3 col-md-6 pb-3">
                <div class="icon-box d-flex">
                    <div class="icon-box-icon pe-3 pb-3">
                        <!-- 价格标签图标 -->
                        <svg class="price-tag">
                            <use xlink:href="#price-tag" />
                        </svg>
                    </div>
                    <div class="icon-box-content">
                        <h3 class="card-title text-uppercase text-dark">日常提议</h3>
                        <p>购买喜欢的物品，是一种享受</p>
                    </div>
                </div>
            </div>

            <!-- 第四个服务项目，占据3列（Large屏幕）或6列（Medium屏幕） -->
            <div class="col-lg-3 col-md-6 pb-3">
                <div class="icon-box d-flex">
                    <div class="icon-box-icon pe-3 pb-3">
                        <!-- 安全支付盾牌图标 -->
                        <svg class="shield-plus">
                            <use xlink:href="#shield-plus" />
                        </svg>
                    </div>
                    <div class="icon-box-content">
                        <h3 class="card-title text-uppercase text-dark">100% 安全支付</h3>
                        <p>安全付款，你的安全由我来保障</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
</body>
</html>
